<template>
	<view class="officialNotice wrapperLayer">
		<titleBar :titleText='"消息通知"' :pageForm='"officialNotice"'></titleBar>
		<view class="navbar">
			<view v-for="(item, index) in tabList" :key="index" class="nav-item" :class="{current: tabFromIndex === index}"
			 @click="tabClicks(index)">
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in tabList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->					
					<u-empty v-if="tabItem.loaded === true && tabItem.msgList.length === 0" text="暂无数据" mode="list"></u-empty>
					<block v-for="(items,index) in tabItem.msgList" :key="index">
						<view class="notice-items-container rowStaBet">
							<view class="rightcontentbox colRange">
								<view class="titlebar">
									{{items.title}}
								</view>
								<view class="time">
									{{items.createTime}}
								</view>
								
								<view class="content-box">
									{{items.content}}
								</view>
							</view>
						</view>
					</block>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import titleBar from '../../components/customize/titlebar.vue';
	export default {
		components: {
			titleBar
		},
		data(){
			return{
				tabFromIndex: 0,
				tabCurrentIndex: 0,
				noticeList:[],
				pageCurrent:'',
				classify:'',
				canloadmore:false,
				loadstatus: 'loading',
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				tabList: [{
						classify: 'system',
						text: '系统消息',
						loadingType: 'more',
						page: 0,
						totalElements: 0,
						msgList: []
					}
				],
			}
		},
		onLoad() {
			this.loadData()
		},
		methods:{
			//加载更多事件
			loadMore() {
				let index = this.tabCurrentIndex;
				this.tabList[index].page = this.tabList[index].page + 1;
				this.loadData();
			},
			//获取订单列表
			loadData(source) {
				debugger
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.tabList[index];
				let classify = navItem.classify;
				let page = navItem.page;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					return;
				}
				navItem.loadingType = 'loading';
				this.$u.api.msgLists({'pageNum':page,'pageSize':10,'classify':classify}).then((res) => {
					debugger
					if(res.code == 200){
						let list = res.rows;
						navItem.totalElements = res.total;
						if (res.rows === navItem.msgList.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
						}
						this.$set(navItem, 'loaded', true);
					} else {
						uni.showToast({
						  title: res.msg,
						  duration: 2000,
						  icon: "none",
						});
					}
				})
			},
			getNextPage(){
				this.$http.post('message/getMessageList', {
					limit: 20,
					offset: this.pageCurrent
				}, 'application/json').then((res) => {
					console.log(res);
					if(res.length<20){
						this.canloadmore = false
						this.loadstatus = 'nomal'
					}else{
						this.canloadmore = true
						this.loadstatus = 'loading'
					}
					this.noticeList = this.noticeList.concat(res)
				})
			},
			tabClicks(index) {
				debugger
				this.tabFromIndex = index;
				this.classify = this.tabList[index].classify
				this.tabList = [{
						classify: 'system',
						text: '系统消息',
						loadingType: 'more',
						page: 0,
						totalElements: 0,
						msgList: []
					}]
					this.loadData();
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
		}
	}
</script>

<style lang="scss">
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;
	
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #303133;
			position: relative;
	
			&.current {
				color: #e10a07;
	
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #e10a07;
				}
			}
		}
	}
	.officialNotice{
		width: 100%;
		.pageContent-container{
			width: 100%;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 40rpx 32rpx;
			.notice-items-container{
				width: 100%;
				margin-bottom: 20rpx;
				.leftsettingbox{
					width: 60rpx;
					height: 60rpx;
				}
				.rightcontentbox{
					width: 605rpx;
					margin-left: 20rpx;
					.titlebar{
						width: 100%;
						font-size: 28rpx;
						font-weight: 500;
						color: #444444;
						line-height: 34rpx;
					}
					.time{
						width: 100%;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-top: 5rpx;
					}
					
					.content-box{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						border-bottom: 1rpx solid #E6E7ED;
						/deep/.box{
							width: 100%;
							padding: 18rpx 20rpx;
							box-sizing: border-box;
							background: #F0F1F7;
							border-radius: 10rpx;
							margin: 30rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							p{
								width: 100%;
								word-wrap: break-word;
								word-break: break-all;
							}
						}
					}
				}
			}
		}
	}
	
	p{
		display: inline;
	}
</style>
